<template lang="html">
  <div class="animation">
  <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

    <h1>动画</h1>
    <div id="demo">
      <button @click="show=!show">Toggle</button>
    </div>
    <transition  
      name="custom-classes-transition"
      enter-active-class="animated tada"
      leave-active-class="animated bounceOutRight"
    >
      <p v-if="show">hello animation</p>
    </transition>
    <p>
      <input type="text" v-focus>
    </p>
  </div>
</template>

<script>
export default {
  name: 'animation',
  data() { 
    return {
      show:true
    }
  }
 }
</script>

<style lang="" scoped>
/*.fade-enter-active, .fade-leave-active {
  transition: opacity 3s;
}
.fade-enter, .fade-leave-to {
  opacity: .3;
}*/
/* 0 */
/* .myanim-enter,myanim-leave-to{ */
  /* transition:all 3s; */
  /* font-size: 50px;
} */
/* 1 */
/* .myanim-enter-tp,.myanim-leave{
  font-size: 30px;
  color:red;
} */
/* 过渡 */
/* .myanim-enter-active,myanim-leave-active{
  /* font-size: 50px; */
  /* transition:all 3s;
} */ 

</style>